<template>
    <div class="courseManage">
        <div class="text1">
            课程名称:<input type="text" v-model="value01" style="height: 36px">
            创建时间:
            <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
            <el-button type="primary" @click="select">搜索</el-button>
        </div>
        <div style="padding-top: 10px">
            <el-button type="primary"  @click="dialogFormVisible = true">新增课程</el-button>
        </div>

        <!--增加弹框1-->
        <div>
            <el-dialog title="新增课程" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="课程名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="adddate">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <!--   编辑弹框信息   --------------->
        <div>
            <el-dialog title="编辑课程" :visible.sync="dialogFormVisible4">
                <el-form :model="form">
                    <el-form-item label="课程名称" :label-width="formLabelWidth" >
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible4 = false">取 消</el-button>
                    <el-button type="primary" @click="updatexinxi">确 定</el-button>
                </div>
            </el-dialog>
        </div>

        <!--      --------------------------------------------------------------------------------->

        <!--      ----------------------------------------------------------------------------------------->

        <!--主页面表格-->
        <el-table
                :data="xiaoquList"
                border
                style="width: 1200px"
                color:black
                :header-cell-style="{'background-color':'#409EFF',
color:'#fff'}">
            <el-table-column
                    fixed
                    prop="courseId"
                    label="ID"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="courseName"
                    label="课程名称"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="coursePicture"
                    label="课程展示"
                    width="180">
                <template slot-scope="scope">
                    <!-- 假设每行数据有一个名为 'imageUrl' 的字段，存储图片的 URL -->
                    <img :src="scope.row.coursePicture" style="width: 100%; height: auto;">
                </template>
            </el-table-column>
            <el-table-column
                    prop="courseDescription"
                    label="课程描述"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="coursePrice"
                    label="课程价格"
                    width="180">
            </el-table-column>

            <el-table-column
                    label="操作"
                    width="180">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="handleClick(scope.row),xianshid4()">编辑小区</el-button>
                    <el-button type="text" size="small" @click="handleClick(scope.row),deleteuser(),dialogFormVisible3 = true">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--页码-->
<!--        <div class="block">-->
<!--            <el-pagination-->
<!--                    layout="prev, pager, next"-->
<!--                    :total="1">-->
<!--            </el-pagination>-->
<!--        </div>-->

    </div>
</template>

<script>
    export default {
        name: "CourseManage",
        data() {
            return {
                value01: '',
                value1: '',
                value2: '',
                input: '',
                dialogTableVisible: false,
                dialogFormVisible: false,
                dialogFormVisible2: false,
                dialogFormVisible3: false,
                dialogFormVisible4: false,
                dialogFormVisible5: false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                formLabelWidth: '120px',
                xiaoquList: [],
                chakanxiaoquList: {},
                chakanxiaoquList1: {},
                addressAll: [],   //省市区
                address1: [], //你选择的地址
                address01: '',
                address001: '',
                location1: '',
                list1: {},
                addOrUpdateFlag: '',
                communityAddress: '',
                communityAreaCode: '',
                communityCity: '',
                communityCoordinates: '',
                communityDistrict: '',
                communityId: '',
                communityLatitude: '',
                communityLongitude: '',
                communityName: '',
                communityProvince: '',
                communityShopCount: '',
                communityStatus: '',
                communityUserCount: '',
                createTime: '',
                distance: '',
                shopIdArr: [],
                addguanlianname: '',
                communityId1: '',
                getids: [],
                src:"",
            }
        },
        created() {//默认请求全部商品
            // this.getAllProvinceAndCityList();
            this.axios.request("/course/courseList", {params:{

                }}).then((res)=>{
                    console.log(res)
                this.xiaoquList = res.data;
                console.log("------------------------------------------")
                console.log(this.xiaoquList)
                console.log("------------------------------------------")

            }).catch((err)=>{

            })
        },
        methods: {
            handleClick(row) {
                this.address1 = [];
                console.log(row);
                this.addOrUpdateFlag = row.addOrUpdateFlag;
                this.communityAddress = row.communityAddress;
                this.communityAreaCode = row.communityAreaCode;
                this.communityCity = row.communityCity;
                this.communityCoordinates = row.communityCoordinates;
                this.communityDistrict = row.communityDistrict;
                this.communityId = row.communityId;
                this.communityLatitude = row.communityLatitude;
                this.communityLongitude = row.communityLongitude;
                this.communityName = row.communityName;
                this.communityProvince = row.communityProvince;
                this.communityShopCount = row.communityShopCount;
                this.communityStatus = row.communityStatus;
                this.communityUserCount = row.communityUserCount;
                this.createTime = row.createTime;
                this.distance = row.distance;
                console.log(this.communityId);
                // this.open();
                // this.dialogFormVisible3 = true;
                this.form.name = this.communityName;
                this.address1.push(this.communityProvince);
                this.address1.push(this.communityCity);
                this.address1.push(this.communityDistrict);
                this.address001 = this.communityAddress;
                this.getlocation();
            },
            handleClick1(row) {
                console.log(row);
                this.communityId1 = row.shopId;
                console.log(this.communityId1);
                this.deleteci();
            },
            shujuclear() {
                this.address1 = [];
                this.addOrUpdateFlag = '';
                this.communityAddress = '';
                this.communityAreaCode = '';
                this.communityCity = '';
                this.communityCoordinates = '';
                this.communityDistrict = '';
                this.communityId = '';
                this.communityLatitude = '';
                this.communityLongitude = '';
                this.communityName = '';
                this.communityProvince = '';
                this.communityShopCount = '';
                this.communityStatus = '';
                this.communityUserCount = '';
                this.createTime = '';
                this.distance = '';

                // this.open();
                // this.dialogFormVisible3 = true;
                this.form.name = '';
            },


            xianshid4() {
                this.dialogFormVisible4 = true;
            },

            //模糊查询
            select(){
                // console.log(this.value1);
                // let date=new Date();
                // console.log(date);
                if (this.value1.length!=0) {
                    //时间转字符串
                    var oldtime = this.value1[0].getFullYear()+"-"+ (this.value1[0].getMonth() + 1) +"-"+ this.value1[0].getDate() + " 00:00:00";
                    var newtime = this.value1[1].getFullYear()+"-"+ (this.value1[1].getMonth() + 1) +"-"+ (this.value1[1].getDate()+1) + " 00:00:00";
                }
                this.axios.request("/community/communityList", {params:{
                        name:this.value01,
                        startTime:oldtime,
                        endTime:newtime,
                        pageNum:1,
                        pageSize:10,
                        communityName:this.value01,
                    }}).then((res)=>{
                    this.xiaoquList = res.data.data;
                    this.value1=[];
                    console.log(this.value1)

                    // console.log(
                    //     this.xiaoquList
                    // )
                }).catch((err)=>{

                })

            },

            //添加小区数据
            adddate(){
                this.dialogFormVisible = false;
                this.axios.post("/community/communityUpdate",{
                    addOrUpdateFlag: 1,
                    communityAddress:this.address001,
                    communityAreaCode: "",
                    communityCity:this.address1[1],
                    communityCoordinates:this.address1[1]+this.address1[2] ,
                    communityDistrict: this.address1[2],
                    communityId: "",
                    communityLatitude: "",
                    communityLongitude: "",
                    communityName:this.form.name,
                    communityProvince:this.address1[0],
                }).then((res)=>{
                    console.log(res.data);
                }).catch((err)=>{

                });
                alert("添加成功");
                window.location.reload();
            },
            //      删除数据
            deleteuser(){
                this.axios.post("/community/communityRemove",{
                    communityId:this.communityId
                }).then((res)=>{
                    console.log(res.data);
                }).catch((err)=>{

                });
                this.dialogFormVisible3 = false;
                alert("删除成功");
                window.location.reload();
            },

            open() {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            shuaxin(){
                this.axios.request("/community/communityList", {params:{
                        name:"",
                        startTime:"",
                        endTime:"",
                        pageNum:1,
                        pageSize:10,
                        communityName:"",
                    }}).then((res)=>{
                    this.xiaoquList = res.data.data;
                    console.log(
                        this.xiaoquList
                    )
                }).catch((err)=>{

                })
            },
            quxiaochuxian(){
                this.dialogFormVisible3 = false;
                alert("已成功取消删除");
                window.location.reload();
            },
            updatexinxi(){
                this.dialogFormVisible4 = false;
                this.axios.post("/community/communityUpdate",{
                    addOrUpdateFlag: 2,
                    communityAddress:this.address001,
                    communityAreaCode: 0,
                    communityCity:this.address1[1],
                    communityCoordinates:this.address1[1]+this.address1[2] ,
                    communityDistrict: this.address1[2],
                    communityId: this.communityId,
                    communityLatitude: "",
                    communityLongitude: "",
                    communityName:this.form.name,
                    communityProvince:this.address1[0],
                    communityShopCount: 0,
                    communityStatus: 1,
                    communityUserCount: 0,
                    createTime:this.createTime,
                    distance:null,

                }).then((res)=>{
                    console.log(res.data);
                });
                window.location.reload();
                alert("修改成功");
                this.shujuclear();
            },

        },
    }
</script>

<style scoped>
    /*.courseManage{*/
    /*    height: 300px;*/
    /*    background-color: green;*/
    /*}*/
</style>